@()(implicit session: Session)
@admin.main("Change password") {

	<div class="container">
		<div class="col-sm-12">
			<section class="main-col" style="margin: 0 auto;">
				<div class="register">
					<h2 class="page-heading" style="font-size: 25px;">Change password</h2>
					<form id="form" class="registration-form form-horizontal" accept-charset="UTF-8"
					action="/fern/back/admin/updatePassword" autocomplete="off" method="post">

						<div class="form-group">
							<label class="control-label col-sm-4">Account:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<span class="input-group-addon"><em
									class="fa fa-user icon2x"></em></span>
									<input id="account" name="account" readonly="readonly" type="text" class="form-control" value="@session.get("user").get"/>
								</div>
							</div>

						</div>

						<div class="form-group">
							<label class="control-label col-sm-4">Password:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<span class="input-group-addon"><em
									class="fa fa-key icon2x"></em></span>
									<input id="password" name="password" placeholder="Password" type="password" autofocus="autofocus" class="form-control" required value="" maxlength="30"/>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-sm-4">New password:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<span class="input-group-addon"><em
									class="fa fa-key icon2x"></em></span>
									<input id="newpassword" name="newpassword" placeholder="New password" type="password" class="form-control" maxlength="30"/>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="control-label col-sm-4">New password again:</label>
							<div class="col-sm-4">
								<div class="input-group">
									<span class="input-group-addon"><em
									class="fa fa-key icon2x"></em></span>
									<input id="newPasswordAgain" name="newPasswordAgain" placeholder="New password again" type="password" class="form-control" maxlength="30"/>
								</div>
							</div>
						</div>

						<div class="actions col-sm-offset-4 col-sm-4">
							<input type="submit" id="loginSubmit" value="Change password"
							class="btn btn-primary btn-lg">
						</div>
					</form>

				</div>
			</section>
		</div>
	</div>

	<script>
			$(function () {
				$('#form').bootstrapValidator({
					feedbackIcons: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
					fields: {
					    password:{
					      validators: {
					          notEmpty: {
					              message: "The password is required!"
							  },
							  remote:{
					              type: "get",
								  url:" /fern/back/admin/getPassword",
								  message: "The password is not correctly!",
								  delay: '1000'
							  }
						  }
						},
						newpassword: {
							validators: {
								notEmpty: {
									message: "The new password is required！"
								}
							}
						},
						newPasswordAgain: {
							validators: {
								notEmpty: {
									message: "The new password again is required！"
								},
								identical: {
									field: 'newpassword',
									message: 'The new password and the new password again are not the same!'
								}
							}
						}
					}
				});
			})




	</script>

}